<template>
<div class="checkdata">

    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true" :model="searchData" class="demo-form-inline" label-position="right">
                    <el-form-item label="图斑ID">
                        <el-input v-model="searchData.landCode"  maxlength="8"
  show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="所属主体">
                        <el-input v-model="searchData.subjectName"  maxlength="30"
  show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="镇街">
                        <el-select v-model="searchData.landTownCode" placeholder="选择镇街"  @change="changeTownCode">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="村居">
                        <el-select v-model="searchData.landVillageCode" placeholder="选择村居" @change="changeVillageCode">
                            <el-option v-for="(item, index) in VillageOptions" :key="index" :label="item.label" :value="item.value" >
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="行业" style="display:none">
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(city,index) in cities" :label="city.value" :key="index">{{ city.label }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
					<el-form-item label="审核状态">
						<el-select v-model="searchData.auditState" placeholder="">
							<el-option label="全部" :value="0"></el-option>
							<el-option label="待审核" :value="1"></el-option>
							<el-option label="已审核" :value="2"></el-option>
							<el-option label="不通过" :value="3"></el-option>
						</el-select>
					</el-form-item>
					
                    <el-form-item>
                        <el-button type="primary" @click="searchInfo()" style="margin-left: 10px">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24">
            <el-card shadow="never" class="main-card">
                <el-col :span="6">
                    <el-card class="box-card" style="margin: 0" shadow="never" ref="ras">
                        <h3 class="page-header">请选择任务</h3>

                        <div slot="header" class="search-top">
                            <el-input placeholder="输入关键字进行过滤" class="searchText" v-model="filterText"></el-input>
                            <el-button type="primary" class="searchBtn" @click="searchMyPlan()">搜索</el-button>
                        </div>

                        <template v-for="(item, index) in plans">
                            <div class="taskList active" :key="index">
                                <el-alert :title="
                          index +
                          1 +
                          ' - ' +
                          item.planName +
                          ' / ' +
                          item.dataCount
                        " :type="dataIndex === index ? 'success' : 'info'" :closable="false">
                                </el-alert>

                                <el-button v-if="dataIndex === index" @click="planSelect(item.id, index)" size="medium" class="medium" type="success">已选中</el-button>
                                <el-button v-else @click="planSelect(item.id, index)" size="medium" class="medium" type="info">未选中</el-button>
                            </div>
                            <el-divider :key="index"></el-divider>
                        </template>
                    </el-card>
                </el-col>

                <el-col :span="18">
                    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column prop="id" type="selection"></el-table-column>

                        <el-table-column fixed prop="landCode" label="图斑ID">
                            <template slot-scope="tableData">
                                {{ tableData.row.landId }}
                            </template>
                        </el-table-column>

                        <el-table-column align="center" prop="planName" label="所在任务">
                        </el-table-column>

                        <el-table-column prop="landName" label="地塘块命名">
                            <template slot-scope="tableData">
                                {{ tableData.row.landName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="landTownName" label="镇街">
                            <template slot-scope="tableData">
                                {{ tableData.row.landTownName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="landVillageName" label="村居">
                            <template slot-scope="tableData">
                                {{ tableData.row.landVillageName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="landProductArea" label="面积(亩)">
                        </el-table-column>

                        <!-- <el-table-column prop="belongsBody" label="所属主体"> </el-table-column> -->
                        <el-table-column align="center" prop="gather" label="采集状态">
                            <template slot-scope="scope">{{
                      scope.row.collectStatus == "2" ? "已经采集" : "未采集"
                    }}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="auditStatus" label="审核状态">
                            <template slot-scope="scope">
                                {{ auditStatusCn(scope.row.auditStatus) }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="auditPerson" label="审核人">
                        </el-table-column>
                        <el-table-column align="center" prop="auditDate" label="审核时间">
                        </el-table-column>

                        <el-table-column label="操作" fixed="right" width="250">
							
                            <template slot="header">
                                <el-button class="ReviewButton" size="medium" type="primary" 
								@click="openAuditMore">批量审核</el-button>
								<el-button  class="ReviewButton"   size="medium" type="warning" 
								 @click="downloadFile">导出Excel</el-button>
                            </template>
						 

                            <template slot-scope="scope">
                                <el-button v-show="scope.row.auditStatus!=2"  type="text" @click="checkAudit(scope.row)">审核</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="bottom">
                        <el-pagination background @size-change="handleSizeChange" @current-change="currentchange" :current-page="paging.pageNum" :page-sizes="[5, 10, 20, 30, 40]" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-card>

            <el-dialog title="图斑地块批量审核" :visible.sync="openAuditMoreShow" :close-on-click-modal="false" width="40%" :destroy-on-close="true">
                <el-form :model="batch" status-icon ref="batch" :inline="false" size="normal" label-width="90px" label-position="right">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="审核状态" prop="name">
                                <template>
                                    <el-radio v-model="batch.auditStatus" :label="2">通过</el-radio>
                                    <el-radio v-model="batch.auditStatus" :label="3">不通过</el-radio>
                                </template>
                            </el-form-item>
                            <el-form-item label="审核描述" prop="name">
                                <el-input type="textarea" v-model="batch.auditMemo">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" size="mini" @click="auditMore">批量审核</el-button>
                </span>
            </el-dialog>

            <el-dialog title="图斑地块审核" :visible.sync="dialogStatus" :close-on-click-modal="false" width="40%" :destroy-on-close="true">
                <el-form :model="modelData" status-icon ref="modelData" :inline="false" size="normal" label-width="90px" label-position="right">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="图斑ID" prop="landCode">
                                <el-input disabled type="text" v-model="modelData.landId">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="地块名" prop="landName">
                                <el-input disabled type="text" v-model="modelData.landName">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="面积(亩)" prop="landProductArea">
                                <el-input disabled type="text" v-model="modelData.landProductArea">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="镇名" prop="landTownName">
                                <el-input disabled type="text" v-model="modelData.landTownName">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="村名" prop="landVillageName">
                                <el-input disabled type="text" v-model="modelData.landVillageName">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="审核状态" prop="name">
                                <el-radio v-model="modelData.auditStatus" :label="2">通过</el-radio>
                                <el-radio v-model="modelData.auditStatus" :label="3">不通过</el-radio>
                            </el-form-item>
                            <el-form-item label="审核描述" prop="name">
                                <el-input type="textarea" v-model="modelData.auditMemo">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" size="mini" @click="onSubmit">确 定</el-button>
                </span>
            </el-dialog>

        </el-col>
    </el-row>
</div>
</template>

<script>
import axios from "@/api/request.js";
import cityOptions from "@/views/mixins/cityOptions.js";
export default {
    mixins: [cityOptions],
    data() {
        return {
            batch: {
                auditStatus: 2,
                auditMemo: ""
            },
            openAuditMoreShow: false,
            dataIndex: 0,
            shadow: "never",
            form: {
                week: "",
            },
            multipleSelection: [],
            tableData: [],
            search: {
                planName: "",
                value: "",
            },
            selectedData: [],
            searchData: {
                pageNumber: 1,
                pageSize: 5,
                landTownCode: "",
                landVillageCode:""
            },
            params: {
                pageNumber: 1,
                pageSize: 10,
            },
            paging: {},
            List: [],
            options: [],
            VillageOptions:[],
            townIndex: 0,
            dialogStatus: false,
            modelData: {},
            plans: [],
            planId: "",
            filterText: "",
        };
    },
    created() {
        this.planData();
        this.selectData();
    },
    methods: {
		downloadFile() {
			/*let params ={
			            "landInfo.landCode": this.searchData.landCode,
			            "landInfo.landName": this.searchData.landName,
			            "landInfo.landTownCode": this.searchData.landTownCode,
			            "landInfo.landVillageCode": this.searchData.landVillageCode,
			            "landSubject.lsSubjectCode": this.searchData.lsSubjectCode,
			            "landInfo.landProduct": this.searchData.landProduct,
			            subjectName: this.searchData.subjectName,
			            "collectTaskLand.planId": this.planId,
						"collectTaskLand.auditStatus": this.searchData.auditState,
			        };
			if (this.searchData.auditState == 0) {
			    delete params["collectTaskLand.auditStatus"];
			}
			
			this.$axios.post("rbac/data/collectLand/export", {
			        params: params
			    })
			    .then((res) => {
			        location.href = res.data.imgUrl;
			        loading.close();
			    });*/
		   this.$confirm("此操作将导出文件, 是否继续?", "提示", {
		    confirmButtonText: "确定",
		    cancelButtonText: "取消",
		    type: "warning",
		  }).then(() => {
			  const loading = this.$loading({
				  lock: true,
				  text: '文件生成导出中...',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.8)'
			  });
			  setTimeout(() => {
				  let params ={
				              "landInfo.landCode": this.searchData.landCode,
				              "landInfo.landName": this.searchData.landName,
				              "landInfo.landTownCode": this.searchData.landTownCode,
				              "landInfo.landVillageCode": this.searchData.landVillageCode,
				              "landSubject.lsSubjectCode": this.searchData.lsSubjectCode,
				              "landInfo.landProduct": this.searchData.landProduct,
				              subjectName: this.searchData.subjectName,
				              "collectTaskLand.planId": this.planId,
				  			"collectTaskLand.auditStatus": this.searchData.auditState,
				          };
				  if (this.searchData.auditState == 0) {
				      delete params["collectTaskLand.auditStatus"];
				  }
				  
				  this.$axios.post("rbac/data/collectLand/export", {
				          params: params
				      })
				      .then((res) => {
				          location.href = res.data.imgUrl;
				          loading.close();
				      });
				 
			  }, 10);
		  });
		},
        changeTownCode(TownCode){
            this.VillageOptions = []
            this.options.forEach((item)=>{
                item.children.forEach((item)=>{
                     if(item.value.substring(0,9) === TownCode){
                        this.searchData.landVillageCode = ''
                        this.VillageOptions.push(item)
                     }
                })
            })
            console.log(this.VillageOptions)
        },
        changeVillageCode(landVillageCode){
            this.$set(this.searchData,'landVillageCode',landVillageCode)
            console.log(this.searchData)
        },
        handleCheckedCitiesChange() {
            console.log('行业选择的方法')
        },
        townIndexFn(index) {
            this.townIndex = index;
        },
        planSelect(val, index) {
            this.dataIndex = index;
            this.planId = val;
            axios
                .get("rbac/data/CollectTaskLand/list", {
                    params: {
                        "collectTaskLand.planId": this.planId,
                    },
                })
                .then((res) => {
                    this.tableData = res.data.list;
                    delete res.data.list;
                    this.paging = res.data;
                });
        },
        auditStatusCn(index) {
            var Status = {
                0: "初始状态",
                1: "待审核",
                2: "通过",
                3: "未通过",
            };

            return Status[index];
        },
        planData() {
            
            if (localStorage.getItem('SYS_TYPE')) {
            this.$axios
                .get("task/task/queryPlanAccordingToTheTask", {
                    params: {
                        pageNumber: 1,
                        pageSize: 100,
                        systemTypeList:localStorage.getItem('SYS_TYPE')
                    },
                })
                .then((res) => {
                    this.planId = res.data.list[0].id;
                    this.params["collectTaskLand.planId"] = res.data.list[0].id;
                    // this.$set(this.params,'collectTaskLand.planId',res.data.list[0].id)
                    this.plans = res.data.list;
                    this.list();
                });
            }
        },
        selectData() {
            var json = JSON.parse(
                window.localStorage.getItem("getTreeData/setAsyncVillageData")
            );
            this.options = json[0].children[0].children;
        },
        reset() {
            this.searchData = {
                pageNumber: 1,
                pageSize: 5,
                landTownCode: "",
                landVillageCode:""
            }
            this.VillageOptions = []
            // this.planData();
            // this.selectData();
        },
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
            this.params["collectTaskLand.planId"] = this.planId;
            this.list();
        },
        currentchange(pageNumber) {
            this.params.pageNumber = pageNumber;
            this.params["collectTaskLand.planId"] = this.planId;
            this.list();
        },

        list() {
            axios
                .get("rbac/data/CollectTaskLand/list", {
                    params: this.params,
                })
                .then((res) => {
                    this.tableData = res.data.list;
                    this.paging = res.data;
                });
        },
        searchInfo() {
			let params ={
                        "landInfo.landCode": this.searchData.landCode,
                        "landInfo.landName": this.searchData.landName,
                        "landInfo.landTownCode": this.searchData.landTownCode,
                        "landInfo.landVillageCode": this.searchData.landVillageCode,
                        "landSubject.lsSubjectCode": this.searchData.lsSubjectCode,
                        "landInfo.landProduct": this.searchData.landProduct,
                        subjectName: this.searchData.subjectName,
                        "collectTaskLand.planId": this.planId,
						"collectTaskLand.auditStatus": this.searchData.auditState,
                    };
			if (this.searchData.auditState == 0) {
			    delete params["collectTaskLand.auditStatus"];
			}
			
            axios
                .get("rbac/data/CollectTaskLand/list", {
                    params: params
                })
                .then((res) => {
                    this.tableData = res.data.list;
                    this.paging = res.data;
                });
        },
        onSubmit() {
            this.dialogStatus = false;
            this.$confirm("是否确认操作?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    //发送审核请求
                    axios
                        .post("rbac/LandSubject/auditLand", {
                            params: {
                                landIds: this.modelData.id,
                                auditStatus: this.modelData.auditStatus,
                                auditMemo: this.modelData.auditMemo,
                            },
                        })
                        .then((res) => {
                            if (res.errorCode === '00000') {
                                if (this.modelData.auditStatus === 2) {
                                    this.$message.success("审核通过");
                                } else {
                                    this.$message.success("审核未通过");
                                }
                            }else{
                                this.$message.error("不符合审核，操作失败");
                            }
                            this.list();
                        });
                })
                .catch(() => {});
        },

        checkAudit(row) {
            this.modelData = row;
            this.dialogStatus = true;
        },

        openAuditMore() {
            if (this.selectedData.length) {
                this.openAuditMoreShow = true;
            } else {
                this.$message.warning("您至少选中一行需要审核的数据");
            }
        },

        auditMore() {
            if (this.selectedData.length) {
                var val = this.selectedData;
                this.$confirm("是否批量审核?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        if (val) {
                            var arr = [];
                            val.forEach(function (item) {
                                arr.push(item.id);
                            });

                            axios
                                .post("rbac/LandSubject/auditLand", {
                                    params: {
                                        landIds: arr.join(","),
                                        auditStatus: this.batch.auditStatus,
                                        auditMemo: this.batch.auditMemo,
                                    },
                                })
                                .then((res) => {

                                    if (res.errorCode === '00000') {
                                        if (this.batch.auditStatus === 2) {
                                            this.$message.success("审核通过");
                                        } else {
                                            this.$message.success("审核未通过");
                                        }
                                    }else{
                                        this.$message.error("系统异常，操作失败");
                                    }

                                    this.openAuditMoreShow = false
                                    this.list();
                                });
                        }

                    })
                    .catch(() => {});
            } else {
                this.$message.warning("您至少选中一行需要审核的数据");
            }

        },
        openn() {
            this.$alert("这是一段内容", "标题名称", {
                confirmButtonText: "确定",
                callback: (action) => {
                    this.$message({
                        type: "info",
                        message: `action: ${action}`,
                    });
                },
            });
        },
        handleSelectionChange(val) {
            this.selectedData = val;
        },
        searchMyPlan() {
            if(localStorage.getItem('SYS_TYPE')){
                this.$axios
                .get("task/task/queryPlanAccordingToTheTask", {
                    params: {
                        pageNumber: 1,
                        pageSize: 100,
                        keywords: this.filterText,
                        systemTypeList:localStorage.getItem('SYS_TYPE')
                    },
                })
                .then((res) => {
                    this.plans = res.data.list;
                });
            }
       
        },
    },
};
</script>

<style lang="scss">
.checkdata {
    background: #fff;
    padding: 15px;

    .ReviewButton {
        margin: 10px 0;
    }

    .cell {
        display: flex;
        justify-content: space-around;

        .el-button {
            margin: 0 5px;
        }
    }

    .subject {
        display: flex;
    }

    .searchText {
        margin: 20px 10px 0px 10px;
        width: 306px;
    }
}
</style>
